import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { withRouter } from 'react-router-dom'
import * as Utils from '../../../utils'
import { restCallAction } from '../../../actions/rest-action'
import { Spin, Avatar, Input, Form, Button } from 'antd'

const FormItem = Form.Item

const formItemLayout = {
	labelCol: { span: 4 },
	wrapperCol: { span: 8 },
}

@connect(
	state => {
		let getUserProfileState = state.restReducer.toJS()['GET_USER_PROFILE']
		return ({
			isSuccess: getUserProfileState.isSuccess,
			isFailed: getUserProfileState.isFailed,
			response: getUserProfileState.response,
		})
	},
	dispatch => ({
		restCallAction: bindActionCreators(restCallAction, dispatch)
	})
)
class UserProfile extends Component {
	constructor(props){
		super(props)
		this.state = {
			showUserProfile: false,
		}
	}

	componentWillMount() {
		let url = `http://localhost:8848/vtg/user/${Utils.getUserId()}`
		this.props.restCallAction('GET_USER_PROFILE', url)
	}

	componentWillReceiveProps(nextProps) {
		let { isSuccess, response } = nextProps
		if (isSuccess) {
			this.setState({
				showUserProfile: true,
				id: response.id,
				userId: response.userId,
				name: response.name,
				email: response.email
			})
		}
	}

	unchanged = (currName, currMail) => currName === this.state.name && currMail === this.state.email

	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
			/*
			* 提交 request 发起修改用户请求
			*
			* */
			}
		})
	}

	render () {
		const { getFieldDecorator, getFieldValue } = this.props.form;
		let { showUserProfile, userId, name, email } = this.state
		return (
			<div>
				{
					showUserProfile ?
						<div>
							<div>
								<Avatar style={{ backgroundColor: '#7265e6' }} size="large">
									{userId}
								</Avatar>
								<div style = {{ float: 'center' }}>
									<Form onSubmit={this.handleSubmit} layout="horizontal">
										<FormItem {...formItemLayout} label={"User Id"}>
											{getFieldDecorator('userId', {
												initialValue: userId,
											})(
												<Input disabled={true} />
											)}
										</FormItem>
										<FormItem {...formItemLayout} label={"User name"}>
											{getFieldDecorator('userName', {
												initialValue: name,
												rules: [
													{ required: true, message: 'Please input user name.' },
												]
											})(
												<Input placeholder={name} />
											)}
										</FormItem>
										<FormItem {...formItemLayout} label={"E-mail"}>
											{getFieldDecorator('email', {
												initialValue: email,
												rules: [
													{ required: true, message: 'Please input E-mail.' },
													{ type: 'email', message: 'This input is not valid E-mail.' },
												]
											})(
												<Input placeholder={email} />
											)}
										</FormItem>
										<FormItem>
											<Button
												type="primary"
												htmlType="submit"
												disabled={this.unchanged(getFieldValue('userName'), getFieldValue('email'))}
											>
												Save
											</Button>
										</FormItem>
									</Form>
								</div>
							</div>
						</div>
						:
						<Spin tip="loading..." size="large" />
				}
			</div>
		)
	}
}

export default withRouter(Form.create()(UserProfile))